<template>
  <div class="viewContain">
    <div style="margin-bottom:20px;text-align:right">
      <el-button size="mini" type="primary" @click="handleImportStore">新增入库信息</el-button>
      <el-button size="mini" type="primary" @click="handleBack">返回</el-button>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form ref="formData" :model="formData" size="small" label-width="150px" class="dialogFormHeight" :rules="rules">
        <el-form-item label="商品编码 :" prop="code">
          <el-input v-model="formData.code" placeholder="最多输入20字" disabled style="max-width:200px" />
        </el-form-item>
        <el-form-item label="入库数量 :" prop="account">
          <el-input v-model="formData.account" placeholder="最多输入20字" clearable style="max-width:200px" />
        </el-form-item>
        <el-form-item label="商品存放地 :" prop="location">
          <el-input v-model="formData.location" placeholder="最多输入20字" clearable style="max-width:200px" />
        </el-form-item>
        <div style="text-align:center">
          <el-button size="mini" type="primary" plain @click="dialogFormVisible=false">取消</el-button>
          <el-button size="mini" type="primary" @click="handleSave">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" align="center" label="商品编号" />
      <el-table-column prop="account" align="center" label="商品数量" />
      <el-table-column prop="location" align="center" label="商品存放地" />
      <el-table-column prop="createTime" align="center" label="入库日期" />
    </el-table>
    <pagination
      :total-count="totalCount"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import pagination from '@/components/pagination/index.vue'
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
import { validNumber } from '@u/validate'

export default {
  components: { pagination },
  mixins: [commonMixin],
  data() {
    const validateNumber = (rules, value, callback) => {
      if (!validNumber(value)) {
        callback(new Error('请输入大于0的正整数!'))
      } else {
        callback()
      }
    }
    return {
      comApiUrlList: new ComApiUrl('/product/api/business/product/getInstockPageByCode'),
      comApiUrlAdd: new ComApiUrl('/product/api/business/product/addInstock'),
      dialogTitle: '新增入库',
      dialogFormVisible: false,
      loading: false,
      formData: {
        account: '',
        code: '',
        createAccount: '',
        location: ''
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        code: ''
      },
      rules: {
        account: [
          { required: true, message: '商品数量不能为空!', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.listQuery.code = this.$route.params.id
    this.getList()
  },
  methods: {
    // 新增商品信息
    handleImportStore() {
      this.dialogFormVisible = true
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.formData.createAccount = userInfo.userId
      this.formData.code = this.$route.params.id
    },
    // 保存
    handleSave() {
      this.$refs.formData.validate(valide => {
        console.log(this.formData)
        valide ? this.create() : ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
